<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 地区热推软文列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 页面主体 -->
        <el-card>
                软文主题名:
                <el-input placeholder="请输入软文主题名" v-model="articleTitle"  @change="articleSearch" class="ipt"></el-input>
                 城市:
                    <el-select v-model="cityValue" placeholder="请选择市">
                        <el-option label="全部" value></el-option>
                        <el-option
                            v-for="item in getCityData"
                            :key="item.id"
                            :label="item.areaName"
                            :value="item.id"
                            @click.native="changeGateway(item)"
                        ></el-option>
                    </el-select>
                    地区:
                    <el-select v-model="quValue" placeholder="请选择区">
                        <el-option label="全部" value></el-option>
                        <el-option
                            v-for="item in getTownData"
                            :key="item.id"
                            :label="item.areaName"
                            :value="item.id"
                            @click.native="changeGateways(item)"
                        ></el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-search" class="ml" @click="articleSearch">搜索</el-button>

            <br /> <br>
            <el-button type="primary" icon="el-icon-plus" @click="addArticle">新增热推软文</el-button>
            <br /><br />

            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="index" label="序号" align="center"> </el-table-column>
                <!-- <el-table-column label="序号" align="center"> </el-table-column> -->
                <el-table-column label="所在市" prop="cityName" align="center"> </el-table-column>
                <el-table-column label="所在区" prop="districtName" align="center"> </el-table-column>
                <el-table-column label="热推软文标题" prop="articleTitle" align="center"> </el-table-column>
                <el-table-column label="创建时间" prop="createTime" align="center"> </el-table-column>
                <el-table-column label="推荐星级" prop="positiveNum" align="center"> </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="toDetail(scope.$index, scope.row)">查看</el-button>
                        <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                    <br />
                    <br />
                </el-table-column>
            </el-table>
            <el-pagination
                    background  
                    maxentries:='100'
                    layout="total, prev, pager, next"
                    :current-page="this.pageNum"
                    :page-size="this.pageSize"
                    :total="maxTotal"
                    @current-change="handleCurrentChange"
                    class="pagination"
                ></el-pagination>
        </el-card>
        <!-- 新增弹窗 -->
        <el-dialog title="提示" :visible.sync="addArticleVisible" width="80%" @close="dialogClose">
            <template #title>
                <span>新增热推软文</span>
                <!-- <div v-if="!isEdit">新增</div>
                <div v-if="isEdit">编辑</div> -->
            </template>
            <el-form ref="addForm" :model="addForm" label-width="120px">
                <el-form-item label="市">
                    <el-select v-model="region" placeholder="请选择">
                        <el-option
                            v-for="item in getCityData"
                            :key="item.id"
                            :label="item.areaName"
                            :value="item.id"
                            @click.native="changeGateway(item)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区">
                    <el-select v-model="regions" clearable placeholder="请选择">
                        <el-option
                            v-for="item in getTownData"
                            :key="item.id"
                            :label="item.areaName"
                            :value="item.id"
                            @click.native="changeGateways(item)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="软文主题">
                    <el-input v-model="addForm.articleTitle"></el-input>
                </el-form-item>
                <el-form-item label="推荐星级">
                      <el-radio-group  v-model="addForm.positiveNum">
                           <el-radio :label="1" :key="1" >1</el-radio>
                           <el-radio :label="2" :key="2" >2</el-radio>
                           <el-radio :label="3" :key="3" >3</el-radio>
                           <el-radio :label="4" :key="4" >4</el-radio>
                           <el-radio :label="5" :key="5" >5</el-radio>
                         </el-radio-group>
                 </el-form-item>
                <el-form-item label="内容" style="width: 1100px">
                    <div class="container">
                        <mavon-editor v-model="addForm.richText" ref="md" style="min-height: 500px" />
                        <!-- @change="change" -->
                        <!-- <el-button class="editor-btn" type="primary" @click="submit">提交</el-button> -->
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="addArticleVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 编辑和查看 -->
        <el-dialog title="提示" :visible.sync="setArticleVisible" width="80%"  @close="dialogClose">
            <template #title>
                <div v-if="!isEdit">查看热推软文</div>
                <div v-if="isEdit">编辑热推软文</div>
            </template>
            <el-form ref="setForm" :model="setForm" label-width="120px">
                <el-form-item label="市">
                    <el-select v-model="setRegion" @change="clearQu" placeholder="请选择">
                        <el-option
                            v-for="item in getCityData"
                            :key="item.id"
                            :label="item.areaName"
                            :value="item.id"
                            @click.native="changeGateway(item)"
                            :disabled="!isEdit"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区">
                    <el-select v-model="setRegions"  placeholder="请选择">
                        <el-option
                            v-for="item in getTownData"
                            :key="item.id"
                            :label="item.areaName"
                            :value="item.id"
                            @click.native="changeGateways(item)"
                            :disabled="!isEdit"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="软文主题">
                    <el-input v-model="setForm.articleTitle" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="推荐星级">
                      <el-radio-group  v-model="setForm.positiveNum">
    <el-radio :label="1" :key="6" :disabled="!isEdit" >1</el-radio>
    <el-radio :label="2" :key="7"   :disabled="!isEdit" >2</el-radio>
    <el-radio :label="3" :key="8"   :disabled="!isEdit" >3</el-radio>
    <el-radio :label="4"  :key="9"  :disabled="!isEdit" >4</el-radio>
    <el-radio :label="5"  :key="10"   :disabled="!isEdit" >5</el-radio>
  </el-radio-group>
                </el-form-item>   
                <el-form-item label="内容" style="width: 1100px">
                    <div class="container">
                        <mavon-editor v-model="setForm.richText"  ref="md" style="min-height: 500px" :77777777jjjfffkkj="false" />
                        <!-- @change="change" -->
                        <!-- <el-button class="editor-btn" type="primary" @click="submit">提交</el-button> -->
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmits" v-if="isEdit">提交</el-button>
                    <el-button @click="setArticleVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
export default {
    data() {
        return {
            addArticleVisible: false,
            setArticleVisible: false,
            isEdit: false,
            // 分页
            pageNum: 1,
            pageSize: 10,
            maxTotal: 0,
            tableData: [],
            region: '',
            regions: '',
            setRegion: '',
            setRegions: '',
            // 搜索的三个参数
            articleTitle: '',
            cityValue: '',
            quValue: '',
            getCityData: [],
            getTownData: [],
            addForm: {
                districtId: '',
                articleTitle: '',
                positiveNum: '',
                richText: ''
            },
            setForm: {
                districtId: '',
                articleTitle: '',
                positiveNum: '',
                richText: ''
            }
        };
    },
    created() {
        this.getData();
        this.getRegionList();
    },
    methods: {
        // 城市列表
        getRegionList() {
            axios.get(this.$myUrl.BASEURL + 'city/getCityBasicList').then((res) => {
                console.log('城市列表', res);
                this.getCityData = res.data.data;
            });
        },
        addArticle() {
            this.addArticleVisible = true;
            this.addForm.positiveNum = 5;
        },
        // 查看
        toDetail(index, row) {
            console.log(row);
            this.setRegion = row.cityId;
            this.isEdit = false;
            this.setArticleVisible = true;
            // 获得区的列表
            axios.get(this.$myUrl.BASEURL + 'district/getDistrictBasicList?cityId=' + row.cityId).then((res) => {
                console.log('区的列表', res);
                this.getTownData = res.data.data;

                axios.get(this.$myUrl.BASEURL + 'districtPushArticle/getDistrictPushArticle?articleId=' + row.articleId).then((res2) => {
                    console.log('详细软文数据', res2);
                    this.setForm = res2.data.data;
                    this.setRegions = res2.data.data.districtId;
                });
            });
        },
        // 删除
        handleDelete(index, row) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    console.log(row.articleId);
                    axios.delete(this.$myUrl.BASEURL + 'article/deleteArticle?articleId=' + row.articleId).then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success('删除成功');
                            this.articleSearch();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 編輯
        handleEdit(index, row) {
            console.log(row);
            this.setRegion = row.cityId;
            this.isEdit = true;
            this.setArticleVisible = true;
            // 获得区的列表
            axios.get(this.$myUrl.BASEURL + 'district/getDistrictBasicList?cityId=' + row.cityId).then((res) => {
                this.getTownData = res.data.data;

                axios.get(this.$myUrl.BASEURL + 'districtPushArticle/getDistrictPushArticle?articleId=' + row.articleId).then((res2) => {
                    console.log('详细软文数据', res2);
                    this.setForm = res2.data.data;
                    this.setRegions = res2.data.data.districtId;
                });
            });
        },
        getData() {
            axios
                .get(
                    this.$myUrl.BASEURL +
                        'districtPushArticle/getDistrictPushArticleList?pageNum=' +
                        this.pageNum +
                        '&pageSize=' +
                        this.pageSize
                )
                .then((res) => {
                    console.log(res);
                    this.tableData = res.data.data;
                    this.maxTotal = res.data.totalNumber;
                });
        },
        // 新增提交
        onSubmit() {
            if (this.region == '') {
                this.$message.error('请选择市');
            } else if (this.regions == '') {
                this.$message.error('请选择区');
            } else if (this.addForm.articleTitle == '') {
                this.$message.error('请输入软文主题');
            } else if (this.addForm.positiveNum == '') {
                this.$message.error('请输入推荐星级');
            } else if (this.addForm.richText == '') {
                this.$message.error('请输入富文本');
            } else {
                axios
                    .post(this.$myUrl.BASEURL + 'districtPushArticle/addDistrictPushArticle', {
                        ...this.addForm
                    })
                    .then((res) => {
                        console.log(res);
                        this.$message.success('新增成功');
                        this.getData();
                        this.addArticleVisible = false;
                    });
            }
        },
        // 编辑的提交
        onSubmits() {
            if (this.setForm.articleTitle == '') {
                this.$message.error('请输入软文主题');
            } else if (this.setForm.positiveNum == '') {
                this.$message.error('请输入推荐星级');
            } else if (this.setForm.richText == '') {
                this.$message.error('请输入富文本');
            } else {
                axios
                    .put(this.$myUrl.BASEURL + 'districtPushArticle/updateDistrictPushArticle', {
                        ...this.setForm
                    })
                    .then((res) => {
                        console.log(res);
                        this.$message.success('编辑成功');
                        this.getData();
                        this.setArticleVisible = false;
                    });
            }
        },
        // 搜索事件
        articleSearch() {
            this.pageNum = 1;
            axios
                .get(
                    this.$myUrl.BASEURL +
                        'districtPushArticle/getDistrictPushArticleList?pageNum=' +
                        this.pageNum +
                        '&pageSize=' +
                        this.pageSize +
                        '&cityId=' +
                        this.cityValue +
                        '&districtId=' +
                        this.quValue +
                        '&articleTitle=' +
                        this.articleTitle
                )
                .then((res) => {
                    console.log(res);
                    this.tableData = res.data.data;
                    this.maxTotal = res.data.totalNumber;
                });
        },
        // 市区的点击
        changeGateway(item) {
            console.log('市', item);
            axios.get(this.$myUrl.BASEURL + 'district/getDistrictBasicList?cityId=' + item.id).then((res) => {
                console.log('区', res);
                this.getTownData = res.data.data;
            });
            this.regions = '';

            this.quValue = '';
        },
        clearQu() {
            this.setRegions = '';
        },
        changeGateways(item) {
            console.log('区', item);
            this.addForm.districtId = item.id;
            this.setForm.districtId = item.id;
        },
        // 弹出框关闭时清除数据
        dialogClose() {
            (this.addForm = {}), (this.setForm = {});
            this.region = '';
            this.regions = '';
            this.cityValue = '';
            this.quValue = '';
        },
        //分页事件
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.articleSearch();
            console.log(`当前页: ${val}`);
        }
    }
};
</script>

<style>
.ml {
    margin-left: 15px;
}
.pagination {
    margin-top: 10px;
}
.ipt {
    display: inline-block;
    width: 300px;
}
</style>